<template>
	<div class="login-container">
		<div class="login-form-wrapper">
			<div class="login-header">
				<h2>客户需求响应系统</h2>
				<p>{{ activeTab === 'login' ? '请输入您的账号和密码登录' : '请填写企业信息进行注册' }}</p>
			</div>

			<!-- 标签切换 -->
			<div class="tab-switch">
				<el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleTabClick">
					<el-tab-pane label="用户登录" name="login"></el-tab-pane>
					<el-tab-pane label="企业注册" name="register"></el-tab-pane>
				</el-tabs>
			</div>

			<!-- 登录表单 -->
			<el-form
			v-if="activeTab === 'login'"
			ref="loginFormRef"
			:model="loginForm"
			:rules="loginRules"
			class="login-form"
			@submit.prevent="handleLogin"
		>
				<el-form-item prop="username">
					<el-input
						v-model="loginForm.username"
						placeholder="请输入用户名"
						:prefix-icon="User"
						clearable
						autocomplete="on"
					/>
				</el-form-item>

				<el-form-item prop="password">
					<el-input
						v-model="loginForm.password"
						type="password"
						placeholder="请输入密码"
						:prefix-icon="Lock"
						show-password
						clearable
					/>
				</el-form-item>

				<el-form-item>
					<el-button
						type="primary"
						class="login-button"
						:loading="loading"
						native-type="submit"
					>
						登录
					</el-button>
				</el-form-item>
			</el-form>

			<!-- 注册表单 -->
			<el-form
			v-else
			ref="registerFormRef"
			:model="registerForm"
			:rules="registerRules"
			class="login-form"
			@submit.prevent="handleRegister"
		>
				<el-form-item prop="contactPhone">
					<el-input
						v-model="registerForm.contactPhone"
						placeholder="请输入联系电话"
						:prefix-icon="Phone"
						clearable
						type="tel"
					/>
				</el-form-item>

				<el-form-item prop="companyName">
					<el-input
						v-model="registerForm.companyName"
						placeholder="请输入企业名称"
						:prefix-icon="OfficeBuilding"
						clearable
					/>
				</el-form-item>

				<el-form-item>
					<el-button
						type="primary"
						class="login-button"
						:loading="registerLoading"
						native-type="submit"
					>
						注册
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { User, Lock, Phone, OfficeBuilding } from "@element-plus/icons-vue";
import { useLogin } from "@/hooks/useLogin";
import { register } from "@/apis/auth.js";

// 创建表单引用
const loginFormRef = ref(null);
const registerFormRef = ref(null);

// 标签页切换
const activeTab = ref('login');

// 注册表单数据
const registerForm = reactive({
	contactPhone: '',
	companyName: ''
});

// 注册表单验证规则
const registerRules = reactive({
	contactPhone: [
		{ required: true, message: '请输入联系电话', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
	],
	companyName: [
		{ required: true, message: '请输入企业名称', trigger: 'blur' },
		{ min: 2, max: 50, message: '企业名称长度在 2 到 50 个字符', trigger: 'blur' }
	]
});

// 注册加载状态
const registerLoading = ref(false);

// 使用登录hook
const { loginForm, loginRules, loading, handleLogin } = useLogin(loginFormRef);

// 标签切换处理
const handleTabClick = () => {
	// 重置表单
	if (activeTab.value === 'login' && loginFormRef.value) {
		loginFormRef.value.resetFields();
	} else if (activeTab.value === 'register' && registerFormRef.value) {
		registerFormRef.value.resetFields();
	}
};

// 处理注册
const handleRegister = async () => {
	if (!registerFormRef.value) return;
	
	try {
		await registerFormRef.value.validate();
		registerLoading.value = true;
		
		// 调用真实的注册API
		await register(registerForm);
		
		// 注册成功提示
		ElMessage.success({
			message: `注册成功！\n账号：${registerForm.contactPhone}\n密码：123456`,
			duration: 5000
		});
		
		// 切换到登录标签
		activeTab.value = 'login';
		// 自动填充用户名
		loginForm.username = registerForm.contactPhone;
		loginForm.password = '123456';
		
	} catch (error) {
		if (error !== false) {
			ElMessage.error('注册失败，请重试');
			console.error('注册失败:', error);
		}
	} finally {
		registerLoading.value = false;
	}
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-form-wrapper {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  transition: transform 0.3s ease;
}

.login-form-wrapper:hover {
  transform: translateY(-5px);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header h2 {
  color: #303133;
  margin-bottom: 10px;
  font-size: 24px;
}

.login-header p {
  color: #909399;
  font-size: 14px;
}

.tab-switch {
  margin-bottom: 20px;
}

.demo-tabs .el-tabs__header {
  margin-bottom: 15px;
}

.login-form {
  width: 100%;
}

.login-form .el-form-item {
  margin-bottom: 24px;
}

.login-form .el-input {
  height: 40px;
}

.login-form .el-input__wrapper {
  border-radius: 8px;
}

.login-button {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  font-size: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: scale(1.02);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
</style>
